<template name="shopdetailheader">
	<view class="shopdetailheader">
		<view class="top_bg">
			<view class="top_bgimg" @click="previewImg()">
				<image :src="headerdata.logo_img"></image>
			</view>
			<view class="top_bgtext">
				<view class="top_bgtitle">{{headerdata.shop_name}}</view>
				<view>商户UID:{{headerdata.uid}}</view>
				<view>门店ID:{{headerdata.id}}</view>
				<view class="top_status" v-if="headerdata.shop_status" :class="statusColor[headerdata.shop_status]">
					{{shopStatusText[headerdata.shop_status]}}
					<!-- <button v-if="status==1" type="primary">协助报件</button> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "shopdetailheader",
		data() {
			return {
				headerdata:{
					img:'',
					shop_name:'',
					uid:'',
					id:'',
					shop_status:''
				},
				statusColor:{
					'1':'bluefont',//审核通过
					'2':'orangefont',//审核中
					'3':'redfont', //审核失败
					'4':'greenfont' //未认证
				},
				shopStatusText:{
					'1':'审核通过',
					'2':'审核中',
					'3':'审核失败',
					'4':'未认证'
				}
			};
		},
		props: {
			shopheaderdata:'',
			status:''
		},
		mounted:function(){
		},
		methods:{
			previewImg:function(){
				uni.previewImage({
					urls:[this.headerdata.logo_img]
				})
			}
		},
		watch:{
			shopheaderdata:function(){
				console.log(this.shopheaderdata)
				this.headerdata.logo_img = this.shopheaderdata.logo_img;
				this.headerdata.shop_name = this.shopheaderdata.shop_name;
				this.headerdata.uid = this.shopheaderdata.uid;
				this.headerdata.id = this.shopheaderdata.id;
				this.headerdata.shop_status = this.shopheaderdata.shop_status;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopdetailheader{
		background-color: #007AFF;
		text-align: center;
		margin-bottom: 150rpx;
		position: relative;
		height: 250rpx;
		font-size: $uni-font-size-base;
		margin-top: -2rpx;
		.top_bg{
			display: flex;
			position: absolute;
			left: 0;right: 0;top: 20rpx;
			width: 100%;
			width: 690rpx;
			height: 335rpx;
			margin: 0 auto;
			background-image: url("../../../static/img/ic_qrcodebg2.png");
			background-size: 100% 100%;
			.top_bgimg{
				width: 45%;
				image{
					width: 230rpx;
					height: 230rpx;
					margin-top: 50rpx;
				}
			}
			.top_bgtext{
				margin-left: 20rpx;
				margin-top: 50rpx;
				view{
					padding: 10rpx;
					text-align: left;
					&.top_bgtitle{
						color: #333333;
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					&.top_status{
						display: flex;
						justify-content: space-between;
						align-items: center;
						button{
							font-size: $uni-font-size-sm;
							border-radius: 100rpx;
							width: 150rpx;
							margin-left: 30rpx;
						}
					}
				}
			}
		}
	}
</style>